<template>
	<view class="trip-menu">
		<view class="trip-menu_item" :class="index == current?'action':''" v-for="index in 5" :key="5"
			@click="change(index)">
			<view class="trip-menu_item_icon" v-if="index == current">
				<rui-icon icon="arrow-right" color="var(--color)" size="25"></rui-icon>
			</view>
			<view class="trip-menu_item_month">
				{{index+6}}月
			</view>
			<view class="trip-menu_item_desc">
				暑假
			</view>
		</view>
	</view>
	<view class="trip-container">


		<view class="trip-container-lines">
			<view class="trip-container-lines_item" v-for="index in 5" :key="index">
				<view class="trip-container-lines_item_head">
					<image class="trip-container-lines_item_head_img" src="../../../static/images/lines.jpg" mode="">
					</image>
					<view class="trip-container-lines_item_head_mdd">
						成都出发
					</view>
					<view class="trip-container-lines_item_head_box">
						<view class="trip-container-lines_item_head_box_detail">
							跟团游·亲子游·6天5晚
						</view>
						<view class="trip-container-lines_item_head_box_enroll">
							13462人已报名
						</view>
					</view>

				</view>

				<view class="trip-container-lines_item_info">
					<rui-lines-ranking name="排行榜" text="入选近7天「当季销售排行」TOP5" @change="$rui.route('/pages/trip/ranking/ranking')"></rui-lines-ranking>
					<view class="trip-container-lines_item_info_title" @click="$rui.route('/pages/trip/detail/detail')">
						<text class="trip-container-lines_item_info_tag">爆品</text>北疆纯玩10日游（2+1头等舱大巴 6大5A景区）穿越独库 天山天池 喀纳斯
						禾木 魔鬼城 赛里木湖 那拉提 巴音布鲁克
					</view>
					<view class="trip-container-lines_item_info_desc">
						适合第一次来疆的游客，用10天假期跟团玩遍北疆精华景点的经典环线，景点不走马观花、一次玩转北疆
					</view>

					<view class="trip-container-lines_item_info_price" @click="$rui.route('/pages/trip/detail/detail')">
						<view class="trip-container-lines_item_info_price_item" v-for="i in 3" :key="i">
							<view class="trip-container-lines_item_info_price_item_day">
								<text class="trip-container-lines_item_info_price_item_day_tag">
									确定成行
								</text>07月13日 <text class="trip-container-lines_item_info_price_item_day_mark">→</text>
								07月18日
							</view>
							<view class="trip-container-lines_item_info_price_item_bottom">
								<view class="trip-container-lines_item_info_price_item_bottom_trip">
									北疆纯玩10日游
								</view>
								<view class="trip-container-lines_item_info_price_item_bottom_price">
									2700
								</view>
							</view>
						</view>
					</view>

				</view>



			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	let current = ref(1)

	const change = index => {
		current.value = index
	}
</script>

<style lang="scss" scoped>
	.trip-container {
		padding-left: 130rpx;

		.trip-container-lines {
			margin: 20rpx;


			&_item {
				background: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				&_info {
					padding: 10rpx 20rpx 20rpx;

					&_price {
						&_item {
							margin-top: 30rpx;

							&_day {
								font-weight: bold;
								display: flex;
								align-items: center;
								font-size: 28rpx;
								color: #333;

								&_tag {
									background: #f60;
									color: #fff;
									font-weight: normal;
									font-size: 20rpx;
									padding: 2rpx 10rpx;
									border-radius: 5rpx;
									margin-right: 15rpx;
								}
							}

							&_bottom {
								display: flex;
								justify-content: space-between;
								margin-top: 10rpx;

								&_trip {
									color: #999;
									font-size: 24rpx;
								}

								&_price {
									font-size: 32rpx;
									font-weight: bold;
									color: #f00;
									line-height: 30rpx;
									display: flex;

									&::before {
										content: "￥";
										font-size: 24rpx;
										font-weight: normal;
									}

									&::after {
										content: "起";
										font-size: 24rpx;
										font-weight: normal;
										color: #999;
										margin-left: 5rpx;
									}
								}

							}
						}
					}

					&_title {
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						color: #333;
					}

					&_tag {
						background: linear-gradient(to left, #fff500, #ffc800);
						font-size: 22rpx;
						width: 60rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 5rpx;
						padding: 2rpx 10rpx;
						font-weight: normal;
						margin-right: 10rpx;
					}

					&_desc {
						color: #999;
						font-size: 24rpx;
						margin: 20rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

				
				}

				&_head {
					width: 100%;
					height: 400rpx;
					position: relative;

					&_img {
						height: inherit;
					}

					&_mdd {
						position: absolute;
						top: 0;
						left: 0;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						padding: 6rpx 15rpx;
						border-top-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
						z-index: 9;
						font-size: 24rpx;
					}

					&_box {
						position: absolute;
						bottom: 0;
						background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, .9), #fff, #fff);
						bottom: 0;
						left: 0;
						width: calc(100% - 40rpx);
						display: flex;
						justify-content: space-between;
						padding: 0 20rpx;
						height: 70rpx;
						line-height: 70rpx;
						border-top-right-radius: 30rpx;
						border-top-left-radius: 30rpx;
						font-size: 24rpx;
					}
				}
			}
		}

	}

	.trip-menu {
		background: #fff;
		box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, .06);
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		position: fixed;
		left: 0;
		// top: 20rpx;
		overflow: hidden;

		.action {
			background: linear-gradient(to right, #fff, #d1e9ff);
		}

		&_item {
			width: 130rpx;
			padding: 30rpx 0;
			text-align: center;
			position: relative;

			&_icon {
				position: absolute;
				left: 6rpx;
				top: 40%;
			}

			&_month {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			&_desc {
				font-size: 22rpx;
				color: #999;
			}

		}
	}
</style>